import React from 'react';
import './App.css';

export default function App() {
  return (
    <div className="app-container">
      {/* 顶部导航栏 */}
      <div className="top-nav">
        <div className="logo-section">
          <img src="assets/b56dd104-26a8-4df5-80e5-682a4b93f765.png" alt="Logo" className="logo" />
        </div>
        <div className="nav-icons">
          <img src="assets/0b6fe692-af36-475c-af15-38510353137e.png" alt="Icon 1" />
          <img src="assets/b32212f4-0e0f-47a4-94ef-204b86812bcf.png" alt="Icon 2" />
          <img src="assets/d7935b3a-5c50-42bd-92d3-25aad76a6ae5.png" alt="Icon 3" />
        </div>
      </div>

      {/* 搜索栏 */}
      <div className="search-container">
        <div className="search-box">
          <img src="assets/9be23957-e392-4f01-bbaf-f5e1df2d438f.png" alt="Search icon" className="search-icon" />
          <span className="search-text">Search</span>
        </div>
      </div>

      {/* 分类标签 */}
      <div className="category-tabs">
        <div className="tab active">
          <img src="assets/279bd80a-df4e-406c-848f-58157d5311e1.png" alt="Favorites" />
          <span>Favorites</span>
        </div>
        <div className="tab">
          <img src="assets/3cf3fcec-ed31-40e3-8307-27bf338350a5.png" alt="History" />
          <span>History</span>
        </div>
        <div className="tab">
          <img src="assets/e66b4b74-4a52-4c64-ba22-0e00cd945e0a.png" alt="Following" />
          <span>Following</span>
        </div>
        <div className="tab">
          <img src="assets/1343e8a7-502e-4700-873c-9b5341732387.png" alt="Orders" />
          <span>Orders</span>
        </div>
      </div>

      {/* Banner区域 */}
      <div className="banner-section">
        <h1 className="banner-title">Banner title</h1>
        <div className="banner-indicators">
          <div className="indicator active"></div>
          <div className="indicator"></div>
          <div className="indicator"></div>
          <div className="indicator"></div>
          <div className="indicator"></div>
        </div>
      </div>

      {/* 第一个产品区域 */}
      <div className="product-section">
        <div className="section-header">
          <h2 className="section-title">Title</h2>
          <div className="arrow-button">
            <img src="assets/3e1eb712-026b-44e5-8ce7-c99b439d76c5.png" alt="Arrow" />
          </div>
        </div>
        <div className="product-grid">
          <div className="product-card">
            <img src="assets/54c49764-1627-4006-b965-656f1a6dd8a8.png" alt="Product" />
            <span className="product-title">Title</span>
          </div>
          <div className="product-card">
            <img src="assets/c8054297-4234-42bc-9525-d287dd481aa7.png" alt="Product" />
            <span className="product-title">Title</span>
          </div>
          <div className="product-card">
            <img src="assets/fc8e4fa7-44d7-4354-88ec-bd412af75eda.png" alt="Product" />
            <span className="product-title">Title</span>
          </div>
          <div className="product-card">
            <img src="assets/3f059d62-b857-4ea8-8a40-98b7d2dc9534.png" alt="Product" />
            <span className="product-title">Title</span>
          </div>
        </div>
      </div>

      {/* 第二个产品区域 */}
      <div className="product-section">
        <div className="section-header">
          <h2 className="section-title">Title</h2>
          <div className="arrow-button">
            <img src="assets/75c68334-a753-4831-9694-5f13f939c988.png" alt="Arrow" />
          </div>
        </div>
        <div className="product-grid-large">
          <div className="product-card-large">
            <img src="assets/5f8cc04d-61d9-44e5-bbf9-9754766812cf.png" alt="Product" />
            <div className="product-info">
              <div className="brand">Brand</div>
              <div className="product-name">Product name</div>
              <div className="price">$10.99</div>
            </div>
          </div>
          <div className="product-card-large">
            <img src="assets/82f2ac42-ce41-41be-a8cf-ece72c635e2a.png" alt="Product" />
            <div className="product-info">
              <div className="brand">Brand</div>
              <div className="product-name">Product name</div>
              <div className="price">$10.99</div>
            </div>
          </div>
          <div className="product-card-small">
            <img src="assets/8618ea8c-7c6a-486d-8f5f-a3ffb9463d93.png" alt="Product" />
            <div className="product-info">
              <div className="brand">Brand</div>
              <div className="product-name">Product name</div>
              <div className="price">$10.99</div>
            </div>
          </div>
        </div>
      </div>

      {/* 第三个产品区域 */}
      <div className="product-section">
        <div className="section-header">
          <h2 className="section-title">Title</h2>
          <div className="arrow-button">
            <img src="assets/3d126963-8d7a-4255-a7ef-224dad865f89.png" alt="Arrow" />
          </div>
        </div>
        <div className="product-grid-small">
          <img src="assets/ef7e223c-0449-4d7f-a7d3-0874de75831d.png" alt="Product" />
          <img src="assets/92a57971-efd7-4269-a288-b7751f637c52.png" alt="Product" />
          <img src="assets/daa90c90-23b0-4d25-b16f-c7dc33ef3d5b.png" alt="Product" />
          <img src="assets/214f6a82-0ef1-4816-be27-f04993e82335.png" alt="Product" />
        </div>
      </div>

      {/* 底部导航栏 */}
      <div className="bottom-nav">
        <div className="nav-item">
          <img src="assets/715b5195-0975-4425-8976-a1609462ce88.png" alt="Home" />
        </div>
        <div className="nav-item">
          <img src="assets/67219259-32a2-4818-a392-a59d74d5e029.png" alt="Search" />
        </div>
        <div className="nav-item">
          <img src="assets/37dc1302-fbb3-409b-8214-3fb93ad1b2d5.png" alt="Favorites" />
        </div>
        <div className="nav-item">
          <img src="assets/7dc5bf87-0ee3-4fc2-9df9-3d1b8bbd9a7f.png" alt="Profile" />
        </div>
        <div className="nav-item">
          <img src="assets/edf8384d-4cd2-4e33-a877-156f6f0185a3.png" alt="More" />
        </div>
        <div className="nav-indicator"></div>
      </div>
    </div>
  );
}
